import React, { Component } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'

import './trade-chart-modal.less'

class IndicatorModal extends Component {
  static defaultProps = {
    title: '',
    onClose: () => {}
  }

  render () {
    const { theme, title, onClose, children } = this.props
    return (
      <div
        className={`trade-chart-modal-${theme}`}>
        <div className="trade-chart-modal-title-container">
          <span className="trade-chart-modal-title-text">
            {title}
          </span>
          <i
            className="trade-chart-modal-title-close"
            onClick={() => { onClose() }}>
            ×
          </i>
        </div>
        <Scrollbars className="trade-chart-modal-content-container">
          {children}
        </Scrollbars>
      </div>
    )
  }
}

export default IndicatorModal
